<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button plain @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain @click="translation">打印</el-button>
      </el-col>
      <right-toolbar @queryTable="Refresh"></right-toolbar>
    </el-row>

    <!-- 使用 vxe-table 替代 el-table -->
    <vxe-table ref="table" :data="tableData.list" :loading="tableData.loading" border>
      <vxe-column field="state" title="状态" align="center">
        <template #default="{ row }">
          <dict-tag :options="apply_state" :value="row.state" />
        </template>
      </vxe-column>
      <vxe-column field="number" title="编号"></vxe-column>
      <vxe-column field="num" title="数量"></vxe-column>
      <vxe-column field="createUserName" title="申请人"></vxe-column>
      <vxe-column field="remark" title="备注"></vxe-column>

      <vxe-column title="操作" align="center" width="200">
        <template #default="{ row }">
          <el-button style="margin-right: 10px;" link type="primary" size="small"
            v-if="row.state === 0 || row.state === 3" @click="handleSub(row)">提交</el-button>

          <el-button style="margin-right: 10px;" link type="primary" size="small"
            v-if="row.state === 0 || row.state === 3" @click="handleUpdate(row)">修改</el-button>
          <el-button v-if="row.state === 0 || row.state === 3" size="small" link type="primary"
            @click="handleDelete(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>

    <div class="pagination-container ">
      <pagination v-show="tableData.paging.total > 0" :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum" v-model:limit="tableData.paging.pageSize" @pagination="getList" />
    </div>

    <el-dialog v-model="isStorgeDialogVisible" width="50%" @close="handleDialogClose">
      <Storge-dialog ref="storgeDialog" @sub="getList"></Storge-dialog>
    </el-dialog>

    <in-apply-dialog ref="applyDialog" @sub="handleAddSuccess"></in-apply-dialog>
  </div>
</template>

<script setup>
import api from "./api.js";
import InApplyDialog from "@/components/Consume/InApplyDialog.vue";
import StorgeDialog from "@/components/Storagereceipt/Storge.vue";
import { ref, reactive, onMounted } from 'vue';

const { proxy } = getCurrentInstance();
const { apply_state } = proxy.useDict("apply_state");

const applyDialog = ref();
const storgeDialog = ref();
const isStorgeDialogVisible = ref(false);
const tableData = reactive({
  loading: false,
  list: [],
  paging: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  }
});

const initQueryParams = {
  applyType: 'HCRK',
  field: 'number',
  value: null
}
const queryParams = reactive({ ...initQueryParams });

/** 查询列表 */
async function getList() {
  tableData.loading = true;
  const { pageNum, pageSize } = tableData.paging;
  const query = { ...queryParams };
  const pageReq = { page: pageNum - 1, size: pageSize };
  api.list(query, pageReq).then(response => {
    const { content, totalElements } = response;
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  }).catch(error => {
    tableData.loading = false;
    console.log(error);
  });
}
/** 新增操作成功后的回调 */
function handleAddSuccess() {
  // 新增成功后的处理
  proxy.$message.success("新增成功");
  getList();  // 刷新数据
}
function Refresh() {
  getList();  // 刷新数据
  proxy.$message.success("刷新成功");
}

function reset() {
  Object.assign(queryParams, initQueryParams);
}

function handleAdd() {
  applyDialog.value.open();
}

function translation() {
  isStorgeDialogVisible.value = true; 
}

function handleUpdate(row) {
  applyDialog.value.open(row);
}

function handleDialogClose() {
  isStorgeDialogVisible.value = false; 
}

function handleSub(row) {
  api.sub(row.id).then(() => {
    getList(); // 直接使用 getList 来更新数据
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除').then(function() {
    return api.del(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

onMounted(() => {
  getList();
});
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 87vh; 
  overflow: hidden; 
}

.vxe-table {
  flex: 1;
  overflow: auto;
}

.pagination-container {
  display: flex;
  justify-content: flex-end; 
}
</style>